window.onload = function () { 
  const canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    text = 'HTML5';
  const shadowCheckbox = document.getElementById('shadowCheckbox');
  const strokeCheckbox = document.getElementById('strokeCheckbox');
  const fillCheckbox = document.getElementById('fillCheckbox');

  const gradientCheckbox = document.getElementById('gradientCheckbox');

  function turnShadowsOn() { 
    context.shadowColor = 'rgba(0,0,0,0.8)';
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur = 10;
  }
  
  function turnShadowsOff() { 
    context.shadowColor = undefined;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 0;
  }
  function draw() { 
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawBackground();
    if (shadowCheckbox.checked) {
      turnShadowsOn();
    } else { 
      turnShadowsOff();
    }
    drawText();
  }
  function drawBackground() { 
    const step_y = 12,
      top_margin = step_y * 4,
      left_margin = step_y * 3;
      
    let i = canvas.height;
    context.strokeStyle = 'lightgray';
    context.lineWidth = 0.5;
    while (i > top_margin) { 
      context.beginPath();
      context.moveTo(0, i);
      context.lineTo(canvas.width, i);
      context.stroke();
      i -= step_y;
    }

    context.strokeStyle = 'rgba(100,0,0,0.3)';
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(left_margin, 0);
    context.lineTo(left_margin, canvas.height);
    context.stroke();
  }

  function drawText() { 
    var text_x = 65, text_y = canvas.height / 2 + 35;
    context.strokeStyle = 'blue';
    if (fillCheckbox.checked) { 
      context.fillText(text, text_x, text_y);
    }

    if (strokeCheckbox.checked) { 
      context.strokeText(text, text_x, text_y);
    }
  }
  context.font = '128px Palatino';
  context.lineWidth = 1.0;
  context.fillStyle = 'cornflowerblue';
  turnShadowsOn();
  draw();

  shadowCheckbox.onchange = draw;
  strokeCheckbox.onchange = draw;
  fillCheckbox.onchange = draw;
}